<template>
  <div>
    <div class="base-info-title">
      <div class="float-left" style="padding: 4px 0;">
      </div>
      <div class="float-right">
        <el-button @click="getCollegeColumn">院审字段修改</el-button>
        <el-button @click="getSchoolColumn">校审字段修改</el-button>
        <el-button @click="getEidtColumn">基础字段修改</el-button>
      </div>
    </div>
    <div class="pd-12px">
      <div class="edu-auto-row">
        <div class="edu-auto-col four-col" v-for="(item, index) in inputSelectDates" :key="index">
          <el-tooltip v-if="item.nameZH.length > 4" :content="item.nameZH" placement="top" effect="light">
            <div class="edu-auto-label">
              {{item.nameZH}}：
            </div>
          </el-tooltip>
          <div v-else class="edu-auto-label">
            {{item.nameZH}}：
          </div>
          <div class="edu-auto-content">
            <span v-show="(!isEdit || item.configType === 1) && item.type != 'date' && item.type != 'select' ">{{item.columnValue}}</span>
            <span v-show="(!isEdit || item.configType === 1) && item.type != 'date' && item.type == 'select' ">{{item.selectValue}}</span>
            <span
              v-show="(!isEdit || item.configType === 1) && item.type == 'date' ">{{item.columnValue | formatDate}}</span>
            <el-input v-show="isEdit && item.configType === 2 && item.type == 'input'" v-model="item.columnValue"
                      placeholder="请输入内容" style="width: 100%;"></el-input>
            <el-select v-show="isEdit && item.configType === 2 && item.type == 'select'" v-model="item.columnValue"
                       placeholder="请输入内容" style="width: 100%;">
              <el-option
                :key="item.columnValue"
                :label="item.selectValue"
                :value="item.columnValue">
              </el-option>
            </el-select>
            <el-date-picker
              v-model="item.columnValue"
              type="date"
              v-show="isEdit && item.configType === 2 && item.type == 'date'"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="timestamp"
              style="width: 100%;">
            </el-date-picker>
          </div>
        </div>
      </div>
      <div v-if="textareas.length != 0" class="hr"></div>
      <div class="edu-auto-row">
        <div class="edu-auto-col" v-for="(item, index) in textareas" :key="index">
          <el-tooltip v-if="item.nameZH.length > 4" :content="item.nameZH" placement="top" effect="light">
            <div class="edu-auto-label">
              {{item.nameZH}}：
            </div>
          </el-tooltip>
          <div v-else class="edu-auto-label">
            {{item.nameZH}}：
          </div>
          <div class="edu-auto-content">
            <span v-if="!isEdit || item.configType === 1">{{item.columnValue}}</span>
            <el-input type="textarea" :rows="2" v-show="isEdit && item.configType === 2" v-model="item.columnValue"
                      placeholder="请输入内容" style="width: 100%;"></el-input>
          </div>
        </div>
      </div>
      <div v-if="images.length != 0" class="hr"></div>
      <div class="edu-auto-row">
        <div class="edu-auto-col" v-for="(item, index) in images" :key="index">
          <el-tooltip v-if="item.nameZH.length > 4" :content="item.nameZH" placement="top" effect="light">
            <div class="edu-auto-label">
              {{item.nameZH}}：
            </div>
          </el-tooltip>
          <div v-else class="edu-auto-label">
            {{item.nameZH}}：
          </div>
          <div class="edu-auto-content">
            <span>{{item.columnValue}}</span>
          </div>
        </div>
      </div>
    </div>
    <el-row v-if="isEdit">
      <el-col :span="24">
        <div class="float-right">
          <el-button @click="isEdit = false">取消</el-button>
          <el-button @click="save" type="primary">保存修改</el-button>
        </div>
      </el-col>
    </el-row>

    <el-dialog
      title="院审字段修改"
      :visible.sync="collegeVisible"
      width="50%">
      <div class="edu-auto-row">
        <div class="edu-auto-col" v-for="(item, index) in eduInputSelectDates" :key="index">
          <el-tooltip v-if="item.nameZH.length > 4" :content="item.nameZH" placement="top" effect="light">
            <div class="edu-auto-label">
              {{item.nameZH}}：
            </div>
          </el-tooltip>
          <div v-else class="edu-auto-label">
            {{item.nameZH}}：
          </div>
          <div class="edu-auto-content">
            <el-input v-if="item.type == 'input'" v-model="item.columnValue"
                      placeholder="请输入内容" style="width: 100%;"></el-input>
            <el-select v-if="item.type == 'select'" v-model="item.columnValue"
                       placeholder="请输入内容" style="width: 100%;"></el-select>
            <el-date-picker
              v-model="item.columnValue"
              type="date"
              v-if="item.type == 'date'"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="timestamp"
              style="width: 100%;">
            </el-date-picker>
          </div>
        </div>
      </div>
      <div v-if="eduTextareas.length != 0" class="hr"></div>
      <div class="edu-auto-row">
        <div class="edu-auto-col full-col" v-for="(item, index) in eduTextareas" :key="index">
          <el-tooltip v-if="item.nameZH.length > 4" :content="item.nameZH" placement="top" effect="light">
            <div class="edu-auto-label">
              {{item.nameZH}}：
            </div>
          </el-tooltip>
          <div v-else class="edu-auto-label">
            {{item.nameZH}}：
          </div>
          <div class="edu-auto-content">
            <el-input type="textarea" :rows="3" v-model="item.columnValue"
                      placeholder="请输入内容" style="width: 100%;min-height: 80px;"></el-input>
          </div>
        </div>
      </div>
      <div v-if="eduImages.length != 0" class="hr"></div>
      <el-form label-position="right" label-width="152px" :inline="true" class="demo-form-inline">
        <el-row>
          <el-col v-for="(item, index) in eduImages" :key="index" :span="12">
            <el-form-item :label="item.nameZH + '：'" style="width: 100%">
              <el-input v-model="item.columnValue"
                        placeholder="请输入内容" style="width: 100%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="edu-auto-row">
        <div class="edu-auto-col full-col">
          <div class="edu-auto-label">
            证明材料：
          </div>
          <div class="edu-auto-content">
            <img v-if="collegeFileList.length !== 0" v-for="(img, index) in collegeFileList" v-bind:key="index" :src="img" class="avatar">
            <el-upload
              class="avatar-uploader"
              action="/api/commonservice/obsfile/uploadimage"
              :data="{bucketname: 'face', folderpath: 'image'}"
              :on-success="handleAvatarSuccess"
              :show-file-list="false">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="collegeVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCollege">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="校审字段修改"
      :visible.sync="schoolVisible"
      width="50%">
      <div class="edu-auto-row">
        <div class="edu-auto-col" v-for="(item, index) in eduInputSelectDates" :key="index">
          <el-tooltip v-if="item.nameZH.length > 4" :content="item.nameZH" placement="top" effect="light">
            <div class="edu-auto-label">
              {{item.nameZH}}：
            </div>
          </el-tooltip>
          <div v-else class="edu-auto-label">
            {{item.nameZH}}：
          </div>
          <div class="edu-auto-content">
            <el-input v-if="item.type == 'input'" v-model="item.columnValue"
                      placeholder="请输入内容" style="width: 100%;"></el-input>
            <el-select v-if="item.type == 'select'" v-model="item.columnValue"
                       placeholder="请输入内容" style="width: 100%;"></el-select>
            <el-date-picker
              v-model="item.columnValue"
              type="date"
              v-if="item.type == 'date'"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="timestamp"
              style="width: 100%;">
            </el-date-picker>
          </div>
        </div>
      </div>
      <div v-if="eduTextareas.length != 0" class="hr"></div>
      <div class="edu-auto-row">
        <div class="edu-auto-col full-col" v-for="(item, index) in eduTextareas" :key="index">
          <el-tooltip v-if="item.nameZH.length > 4" :content="item.nameZH" placement="top" effect="light">
            <div class="edu-auto-label">
              {{item.nameZH}}：
            </div>
          </el-tooltip>
          <div v-else class="edu-auto-label">
            {{item.nameZH}}：
          </div>
          <div class="edu-auto-content">
            <el-input type="textarea" :rows="3" v-model="item.columnValue"
                      placeholder="请输入内容" style="width: 100%;min-height: 80px;"></el-input>
          </div>
        </div>
      </div>
      <div v-if="eduImages.length != 0" class="hr"></div>
      <div class="edu-auto-row">
        <div class="edu-auto-col full-col" v-for="(item, index) in eduImages" :key="index">
          <div class="edu-auto-label">{{item.nameZH}}：</div>
          <div class="edu-auto-content">
            <el-input type="textarea" :rows="3" v-model="item.columnValue"
                      placeholder="请输入内容" style="width: 100%;min-height: 80px;"></el-input>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="schoolVisible = false">取 消</el-button>
        <el-button type="primary" @click="schoolVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getEidtColumn,
  saveEdit,
  getEidtAcaEduColumn,
  saveEditAcaEduColumnVal
} from "common/src/api/studentinfo";
import { queryDic } from "common/src/api/dictionary.js";
import filters from "common/src/filters";

export default {
  name: "DetailInfo",
  props: ["userInfo", "tableName", "studentId"],
  data() {
    return {
      isEdit: false,
      collegeVisible: false,
      schoolVisible: false,
      info: [],
      inputSelectDates: [],
      selects: {},
      textareas: [],
      images: [],
      eduInputSelectDates: [],
      eduTextareas: [],
      eduImages: [],
      collegeFileList: [],
      schoolFileList: [],
      saveInfo: {
        table: "",
        studentId: "",
        type: "1",
        viewColumn: ""
      },
      saveAcaEdu: {
        type: "",
        editExplain: "修改说明",
        evidenceList: [],
        beanList: [],
        beforeList: []
      },
      testData: {
        type: "10",
        editExplain: "修改说明",
        evidenceList: [],
        beanList: [
          {
            table: "student_basic_information_t",
            studentId: "1",
            viewColumn: {
              id: null,
              columnList: [
                {
                  column: "NAME_",
                  columnValue: "你好"
                }
              ]
            }
          }
        ],
        beforeList: [
          {
            table: "student_basic_information_t",
            studentId: "1",
            viewColumn: {
              id: null,
              columnList: [
                {
                  column: "NAME_",
                  nameZH: "主键",
                  columnValue: "好"
                }
              ]
            }
          }
        ]
      }
    };
  },
  methods: {
    getStudentName() {
      this.userInfo.columnList.forEach(item => {
        if (item.nameZH === "姓名") {
          this.userInfo.name = item.columnValue;
        }
      });
    },
    async getEidtColumn() {
      this.isEdit = true;
    },
    async getCollegeColumn() {
      this.saveAcaEdu.type = 9;
      this.eduInputSelectDates = [];
      this.eduTextareas = [];
      this.eduImages = [];
      this.collegeVisible = true;
      this.getEidtAcaEdu(9);
    },
    async getSchoolColumn() {
      this.saveAcaEdu.type = 10;
      this.eduInputSelectDates = [];
      this.eduTextareas = [];
      this.eduImages = [];
      this.schoolVisible = true;
      this.getEidtAcaEdu(10);
    },
    async getStudentBaseInfo() {
      let query = {
        table: "student_basic_information_t",
        studentId: "1",
        type: 1
      };

      let baseInfo = await getStudentInfo(query);
      if (baseInfo && baseInfo.data) {
        baseInfo.data[0].columnList.forEach(item => {
          item.isEdit = false;
        });
        this.info = baseInfo.data[0].columnList;
      }
    },
    save() {
      this.saveInfo.table = this.tableName;
      this.saveInfo.studentId = this.studentId;

      let list = _.filter(this.userInfo.columnList, { configType: 2 });
      let columnList = [];
      list.forEach(item => {
        let obj = {
          column: item.column,
          columnValue: item.columnValue
        };
        columnList.push(obj);
      });
      let obj = {
        id: this.userInfo.id,
        columnList: columnList
      };
      this.saveInfo.viewColumn = obj;

      saveEdit(this.saveInfo);
      this.isEdit = false;
    },
    formatUserInfo() {
      let self = this;
      let inputSelectDates = [];
      let textareas = [];
      let images = [];
      this.inputSelectDates = [];
      this.textareas = [];
      this.images = [];
      let selects = [];
      let columns = this.userInfo.columnList;
      columns.forEach(item => {
        if (item.type == "input" || item.type == "date") {
          inputSelectDates.push(item);
        }
        if (item.type == "select") {
          inputSelectDates.push(item);
          if (item.value) {
            selects.push(item.value + "." + item.columnValue);
          }
        }
        if (item.type == "textarea") {
          textareas.push(item);
        }
        if (item.type == "image") {
          images.push(item);
        }
      });
      if (selects.length !== 0) {
        queryDic({
          lang: "cn",
          type: "self",
          keys: selects
        }).then(function(res) {
          if (res && res.data) {
            inputSelectDates.forEach(item => {
              if (item.value) {
                item.selectValue = res.data[item.value][item.columnValue];
              }
            });
            self.inputSelectDates = inputSelectDates;
          }
          self.textareas = textareas;
          self.images = images;
        });
      } else {
        self.inputSelectDates = inputSelectDates;
        self.textareas = textareas;
        self.images = images;
      }
    },
    eduFormatUserInfo(table, columnList) {
      let columns = columnList.columnList;
      columns.forEach(item => {
        if (
          item.type == "input" ||
          item.type == "select" ||
          item.type == "date"
        ) {
          this.eduInputSelectDates.push(item);
        }
        if (item.type == "textarea") {
          this.eduTextareas.push(item);
        }
        if (item.type == "image") {
          this.eduImages.push(item);
        }
      });
      this.saveAcaEdu.beanList.push({
        table: table,
        studentId: this.studentId,
        viewColumn: columnList
      });
    },
    async getEidtAcaEdu(type) {
      this.saveAcaEdu.beforeList = [];
      this.saveAcaEdu.beanList = [];
      let query = {
        configOptionsId: type,
        studentId: this.studentId
      };
      let res = await getEidtAcaEduColumn(query);
      if (res && res.data) {
        for (let key in res.data) {
          this.eduFormatUserInfo(key, res.data[key]);
          this.saveAcaEdu.beforeList.push({
            table: key,
            studentId: this.studentId,
            viewColumn: res.data[key]
          });
        }
      }
    },
    submitCollege() {
      saveEditAcaEduColumnVal(this.saveAcaEdu).then(res => {
        if (res.code === 200) {
          this.$message({
            message: "提交成功",
            type: "success"
          });
        } else {
          this.$message({
            message: res.msg,
            type: "warning"
          });
        }
        this.collegeVisible = false;
      });
    },
    handleAvatarSuccess(res, file) {
      this.collegeFileList.push(URL.createObjectURL(file.raw));
      this.saveAcaEdu.evidenceList.push(res.data.file.objectkey);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  },
  watch: {
    userInfo: function(val, oldval) {
      this.formatUserInfo();
      this.isEdit = false;
    }
  },
  mounted() {
    console.log(this.studentId);
  },
  filters: {
    formatDate(date) {
      return filters.formatDate(date, "yyyy/MM/dd");
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.item-group {
  width: 100%;
  height: 32px;
  float: left;
  font-size: 12px;
  label,
  span {
    display: inline-block;
    line-height: 32px;
  }
  label {
    /*width: 64px;*/
    text-align: right;
  }
}

.base-info-title {
  border-bottom: 1px solid #e5e5e5;
  height: 46px;
  overflow: hidden;
  img,
  span {
    display: inline-block;
    vertical-align: middle;
    /*margin-top: 12px;*/
  }
  img {
    width: 28px;
  }
  span {
    font-size: 16px;
    color: #262626;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border: dashed 1px #d2d4d6;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
  float: left;
  margin-right: 10px;
}
.edu-auto-content {
  font-size: 14px;
}
.edu-auto-label {
  font-size: 14px;
}
</style>
